<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.61">
    <style>
      :root {
        --c-bg: #fff;
      }
      html.dark {
        --c-bg: #22272e;
      }
      html, body {
        background-color: var(--c-bg);
      }
    </style>
    <script>
      const userMode = localStorage.getItem('vuepress-color-scheme');
			const systemDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
			if (userMode === 'dark' || (userMode !== 'light' && systemDarkMode)) {
				document.documentElement.classList.toggle('dark', true);
			}
    </script>
    <script type="text/javascript" src="/lib/tinymce5.10.5/tinymce.min.js"></script><title>Form | JN Frontend Docs</title><meta name="description" content="江苏金农股份有限公司前端文档站，站内包含内部组件库、微前端框架等文档">
    <link rel="preload" href="/assets/style-7f06fc9f.css" as="style"><link rel="stylesheet" href="/assets/style-7f06fc9f.css">
    <link rel="modulepreload" href="/assets/app-bfaa94ab.js"><link rel="modulepreload" href="/assets/framework-340c2a10.js"><link rel="modulepreload" href="/assets/Form.html-3068bdf0.js"><link rel="modulepreload" href="/assets/Form.html-5d6b22f4.js"><link rel="prefetch" href="/assets/index.html-c08dba9c.js" as="script"><link rel="prefetch" href="/assets/index.html-db435b79.js" as="script"><link rel="prefetch" href="/assets/letconst.html-3b192b16.js" as="script"><link rel="prefetch" href="/assets/熟悉而陌生的模块化.html-9f3227d8.js" as="script"><link rel="prefetch" href="/assets/Address.html-f7647e70.js" as="script"><link rel="prefetch" href="/assets/BaseDrawerContent.html-ab3037a8.js" as="script"><link rel="prefetch" href="/assets/BaseModule.html-1478fa1c.js" as="script"><link rel="prefetch" href="/assets/ButtonGroup.html-fcf3a331.js" as="script"><link rel="prefetch" href="/assets/Collapse.html-7a8cea51.js" as="script"><link rel="prefetch" href="/assets/DebounceButton.html-72c7ad85.js" as="script"><link rel="prefetch" href="/assets/FigureInput.html-df25dc00.js" as="script"><link rel="prefetch" href="/assets/FilePreview.html-4937fb57.js" as="script"><link rel="prefetch" href="/assets/HintBox.html-6835dcbd.js" as="script"><link rel="prefetch" href="/assets/Icon.html-607be958.js" as="script"><link rel="prefetch" href="/assets/IconPicker.html-81fcc2d0.js" as="script"><link rel="prefetch" href="/assets/IrregularTable.html-3334208c.js" as="script"><link rel="prefetch" href="/assets/JnEditor.html-f19354db.js" as="script"><link rel="prefetch" href="/assets/LodingShade.html-ce32f5ba.js" as="script"><link rel="prefetch" href="/assets/Modal.html-1a4aba4c.js" as="script"><link rel="prefetch" href="/assets/OperateExcel.html-13779fda.js" as="script"><link rel="prefetch" href="/assets/SelectTree.html-8eb35b5a.js" as="script"><link rel="prefetch" href="/assets/SelectTreeV2.html-0294e83a.js" as="script"><link rel="prefetch" href="/assets/Table.html-e8baa24a.js" as="script"><link rel="prefetch" href="/assets/Tabs.html-f99f83c2.js" as="script"><link rel="prefetch" href="/assets/Tree.html-94f64c00.js" as="script"><link rel="prefetch" href="/assets/UpdateLog.html-96fed179.js" as="script"><link rel="prefetch" href="/assets/Updateguide.html-d24798ff.js" as="script"><link rel="prefetch" href="/assets/Upload.html-5d77d402.js" as="script"><link rel="prefetch" href="/assets/index.html-b65ce016.js" as="script"><link rel="prefetch" href="/assets/index.html-fe9f70c5.js" as="script"><link rel="prefetch" href="/assets/moenorepo.html-6096f1b5.js" as="script"><link rel="prefetch" href="/assets/subPro.html-36f639d2.js" as="script"><link rel="prefetch" href="/assets/FAQ.html-4ecdac2c.js" as="script"><link rel="prefetch" href="/assets/commitMsg.html-307d426c.js" as="script"><link rel="prefetch" href="/assets/construction.html-99aa1b4d.js" as="script"><link rel="prefetch" href="/assets/environmentVar.html-49d04c3a.js" as="script"><link rel="prefetch" href="/assets/homeDev.html-6a2fb1a0.js" as="script"><link rel="prefetch" href="/assets/index.html-0b6e8117.js" as="script"><link rel="prefetch" href="/assets/microRegList.html-b62877d4.js" as="script"><link rel="prefetch" href="/assets/plan.html-277e3cea.js" as="script"><link rel="prefetch" href="/assets/practice.html-c4d36b33.js" as="script"><link rel="prefetch" href="/assets/production.html-dc42f69e.js" as="script"><link rel="prefetch" href="/assets/quickStart-monorepo.html-7b3b7f8d.js" as="script"><link rel="prefetch" href="/assets/quickStart.html-b6e33c48.js" as="script"><link rel="prefetch" href="/assets/quickStart2.html-b10000c3.js" as="script"><link rel="prefetch" href="/assets/scheme.html-d542f716.js" as="script"><link rel="prefetch" href="/assets/storeMage.html-815c6185.js" as="script"><link rel="prefetch" href="/assets/theme.html-465ca127.js" as="script"><link rel="prefetch" href="/assets/v1ToV2.html-9a2bc18d.js" as="script"><link rel="prefetch" href="/assets/workflow.html-6e534c27.js" as="script"><link rel="prefetch" href="/assets/index.html-81fa1c2b.js" as="script"><link rel="prefetch" href="/assets/painSpot.html-77e2c96b.js" as="script"><link rel="prefetch" href="/assets/resolve.html-2a8f8dad.js" as="script"><link rel="prefetch" href="/assets/index.html-bdc10a52.js" as="script"><link rel="prefetch" href="/assets/bom.html-ced4003b.js" as="script"><link rel="prefetch" href="/assets/dom.html-3d9c1f79.js" as="script"><link rel="prefetch" href="/assets/download.html-fc87bd6a.js" as="script"><link rel="prefetch" href="/assets/index.html-193d1a36.js" as="script"><link rel="prefetch" href="/assets/install.html-c6c6b180.js" as="script"><link rel="prefetch" href="/assets/number.html-9929ee21.js" as="script"><link rel="prefetch" href="/assets/object.html-62e9bd7c.js" as="script"><link rel="prefetch" href="/assets/storage.html-438a0e0f.js" as="script"><link rel="prefetch" href="/assets/string.html-66b8ad68.js" as="script"><link rel="prefetch" href="/assets/tree.html-6b8c9496.js" as="script"><link rel="prefetch" href="/assets/FormGenerate.html-493fc23c.js" as="script"><link rel="prefetch" href="/assets/Bar.html-ba9fe5e8.js" as="script"><link rel="prefetch" href="/assets/Basic.html-e8fb918f.js" as="script"><link rel="prefetch" href="/assets/Line.html-4604e09a.js" as="script"><link rel="prefetch" href="/assets/Pie.html-c30a8814.js" as="script"><link rel="prefetch" href="/assets/InfoAutocomplete.html-00b41d3e.js" as="script"><link rel="prefetch" href="/assets/InfoSelect.html-671c17bd.js" as="script"><link rel="prefetch" href="/assets/InfoSelectAll.html-9008c8b4.js" as="script"><link rel="prefetch" href="/assets/assets.html-260242e8.js" as="script"><link rel="prefetch" href="/assets/componentConcept.html-6e4317dc.js" as="script"><link rel="prefetch" href="/assets/componentPractical.html-9086711f.js" as="script"><link rel="prefetch" href="/assets/directives.html-d0ae2312.js" as="script"><link rel="prefetch" href="/assets/indexes.html-e77392a8.js" as="script"><link rel="prefetch" href="/assets/pageContentAuths.html-4d589490.js" as="script"><link rel="prefetch" href="/assets/pages.html-c55a8bc5.js" as="script"><link rel="prefetch" href="/assets/requestApi.html-88bb2797.js" as="script"><link rel="prefetch" href="/assets/requestConcept.html-adda0d11.js" as="script"><link rel="prefetch" href="/assets/requestPractical.html-faecae2b.js" as="script"><link rel="prefetch" href="/assets/requestProxy.html-3200aa1f.js" as="script"><link rel="prefetch" href="/assets/routerConcept.html-6accad32.js" as="script"><link rel="prefetch" href="/assets/routerPractical.html-512c6707.js" as="script"><link rel="prefetch" href="/assets/storeConcept.html-e22e9ac7.js" as="script"><link rel="prefetch" href="/assets/storePractical.html-247d8533.js" as="script"><link rel="prefetch" href="/assets/typesConcept.html-e1076ad0.js" as="script"><link rel="prefetch" href="/assets/typesPractical.html-a063ac6b.js" as="script"><link rel="prefetch" href="/assets/basic-old.html-e813c095.js" as="script"><link rel="prefetch" href="/assets/basic.html-96becbed.js" as="script"><link rel="prefetch" href="/assets/dependence.html-43d38fc7.js" as="script"><link rel="prefetch" href="/assets/micro-od.html-9dfcee74.js" as="script"><link rel="prefetch" href="/assets/micro.html-c39098c6.js" as="script"><link rel="prefetch" href="/assets/404.html-f9875e7b.js" as="script"><link rel="prefetch" href="/assets/index.html-48aa5787.js" as="script"><link rel="prefetch" href="/assets/index.html-d608a849.js" as="script"><link rel="prefetch" href="/assets/letconst.html-3f2e0b96.js" as="script"><link rel="prefetch" href="/assets/熟悉而陌生的模块化.html-4ff45b9c.js" as="script"><link rel="prefetch" href="/assets/Address.html-42ef6369.js" as="script"><link rel="prefetch" href="/assets/BaseDrawerContent.html-ca2f5dbf.js" as="script"><link rel="prefetch" href="/assets/BaseModule.html-bcac5fb3.js" as="script"><link rel="prefetch" href="/assets/ButtonGroup.html-45240bc0.js" as="script"><link rel="prefetch" href="/assets/Collapse.html-2820a639.js" as="script"><link rel="prefetch" href="/assets/DebounceButton.html-a6375e54.js" as="script"><link rel="prefetch" href="/assets/FigureInput.html-6a9e4a73.js" as="script"><link rel="prefetch" href="/assets/FilePreview.html-f7c5e9fe.js" as="script"><link rel="prefetch" href="/assets/HintBox.html-bbf1cd9e.js" as="script"><link rel="prefetch" href="/assets/Icon.html-d95e3688.js" as="script"><link rel="prefetch" href="/assets/IconPicker.html-81a7e524.js" as="script"><link rel="prefetch" href="/assets/IrregularTable.html-a890399c.js" as="script"><link rel="prefetch" href="/assets/JnEditor.html-bf85cd36.js" as="script"><link rel="prefetch" href="/assets/LodingShade.html-c0d28ff3.js" as="script"><link rel="prefetch" href="/assets/Modal.html-794dcc40.js" as="script"><link rel="prefetch" href="/assets/OperateExcel.html-b0ba91a0.js" as="script"><link rel="prefetch" href="/assets/SelectTree.html-595c0e38.js" as="script"><link rel="prefetch" href="/assets/SelectTreeV2.html-34bccf21.js" as="script"><link rel="prefetch" href="/assets/Table.html-d73c36b9.js" as="script"><link rel="prefetch" href="/assets/Tabs.html-84faed0a.js" as="script"><link rel="prefetch" href="/assets/Tree.html-3667a114.js" as="script"><link rel="prefetch" href="/assets/UpdateLog.html-4a1f3631.js" as="script"><link rel="prefetch" href="/assets/Updateguide.html-02371534.js" as="script"><link rel="prefetch" href="/assets/Upload.html-10ba1ca0.js" as="script"><link rel="prefetch" href="/assets/index.html-c47a30df.js" as="script"><link rel="prefetch" href="/assets/index.html-320567a6.js" as="script"><link rel="prefetch" href="/assets/moenorepo.html-576011bb.js" as="script"><link rel="prefetch" href="/assets/subPro.html-75b57a23.js" as="script"><link rel="prefetch" href="/assets/FAQ.html-f1fca6c0.js" as="script"><link rel="prefetch" href="/assets/commitMsg.html-6acdc46a.js" as="script"><link rel="prefetch" href="/assets/construction.html-46da6ea7.js" as="script"><link rel="prefetch" href="/assets/environmentVar.html-cc5e18a8.js" as="script"><link rel="prefetch" href="/assets/homeDev.html-45d74a50.js" as="script"><link rel="prefetch" href="/assets/index.html-957a05f9.js" as="script"><link rel="prefetch" href="/assets/microRegList.html-58159017.js" as="script"><link rel="prefetch" href="/assets/plan.html-f544d172.js" as="script"><link rel="prefetch" href="/assets/practice.html-9190a049.js" as="script"><link rel="prefetch" href="/assets/production.html-efcd58ad.js" as="script"><link rel="prefetch" href="/assets/quickStart-monorepo.html-fa679827.js" as="script"><link rel="prefetch" href="/assets/quickStart.html-b2b2cf91.js" as="script"><link rel="prefetch" href="/assets/quickStart2.html-f4e9daf8.js" as="script"><link rel="prefetch" href="/assets/scheme.html-554f0667.js" as="script"><link rel="prefetch" href="/assets/storeMage.html-6e8d9e82.js" as="script"><link rel="prefetch" href="/assets/theme.html-769f6eb6.js" as="script"><link rel="prefetch" href="/assets/v1ToV2.html-3ae59d40.js" as="script"><link rel="prefetch" href="/assets/workflow.html-9f9833c6.js" as="script"><link rel="prefetch" href="/assets/index.html-3970f3cb.js" as="script"><link rel="prefetch" href="/assets/painSpot.html-24db33c6.js" as="script"><link rel="prefetch" href="/assets/resolve.html-84653b13.js" as="script"><link rel="prefetch" href="/assets/index.html-b7232fce.js" as="script"><link rel="prefetch" href="/assets/bom.html-ea3a3186.js" as="script"><link rel="prefetch" href="/assets/dom.html-9edcb1e4.js" as="script"><link rel="prefetch" href="/assets/download.html-4dd3d345.js" as="script"><link rel="prefetch" href="/assets/index.html-b478f1d0.js" as="script"><link rel="prefetch" href="/assets/install.html-3a798661.js" as="script"><link rel="prefetch" href="/assets/number.html-f73b01de.js" as="script"><link rel="prefetch" href="/assets/object.html-3bffe94b.js" as="script"><link rel="prefetch" href="/assets/storage.html-02163cce.js" as="script"><link rel="prefetch" href="/assets/string.html-2368bc12.js" as="script"><link rel="prefetch" href="/assets/tree.html-795d0257.js" as="script"><link rel="prefetch" href="/assets/FormGenerate.html-112e9811.js" as="script"><link rel="prefetch" href="/assets/Bar.html-b734d02b.js" as="script"><link rel="prefetch" href="/assets/Basic.html-8aa29fd5.js" as="script"><link rel="prefetch" href="/assets/Line.html-0006a111.js" as="script"><link rel="prefetch" href="/assets/Pie.html-e5d8de5a.js" as="script"><link rel="prefetch" href="/assets/InfoAutocomplete.html-335586cf.js" as="script"><link rel="prefetch" href="/assets/InfoSelect.html-19b6bfa4.js" as="script"><link rel="prefetch" href="/assets/InfoSelectAll.html-ba486e6d.js" as="script"><link rel="prefetch" href="/assets/assets.html-c2237689.js" as="script"><link rel="prefetch" href="/assets/componentConcept.html-d44f97dc.js" as="script"><link rel="prefetch" href="/assets/componentPractical.html-4c106614.js" as="script"><link rel="prefetch" href="/assets/directives.html-1374cfb4.js" as="script"><link rel="prefetch" href="/assets/indexes.html-e9face96.js" as="script"><link rel="prefetch" href="/assets/pageContentAuths.html-7e4a0e5b.js" as="script"><link rel="prefetch" href="/assets/pages.html-5c59cfc9.js" as="script"><link rel="prefetch" href="/assets/requestApi.html-815bdaf3.js" as="script"><link rel="prefetch" href="/assets/requestConcept.html-19ae22e9.js" as="script"><link rel="prefetch" href="/assets/requestPractical.html-2adeb105.js" as="script"><link rel="prefetch" href="/assets/requestProxy.html-fbb23d6e.js" as="script"><link rel="prefetch" href="/assets/routerConcept.html-d2000500.js" as="script"><link rel="prefetch" href="/assets/routerPractical.html-67a23ee0.js" as="script"><link rel="prefetch" href="/assets/storeConcept.html-3efb81b4.js" as="script"><link rel="prefetch" href="/assets/storePractical.html-72548894.js" as="script"><link rel="prefetch" href="/assets/typesConcept.html-83bcd54c.js" as="script"><link rel="prefetch" href="/assets/typesPractical.html-a8643161.js" as="script"><link rel="prefetch" href="/assets/basic-old.html-5fa6f14d.js" as="script"><link rel="prefetch" href="/assets/basic.html-82c1a5e3.js" as="script"><link rel="prefetch" href="/assets/dependence.html-f50c9128.js" as="script"><link rel="prefetch" href="/assets/micro-od.html-67e0eb46.js" as="script"><link rel="prefetch" href="/assets/micro.html-882e2183.js" as="script"><link rel="prefetch" href="/assets/404.html-1cace4e3.js" as="script"><link rel="prefetch" href="/assets/demoBlock-547ba88b.js" as="script"><link rel="prefetch" href="/assets/update-log-block-723bb72d.js" as="script"><link rel="prefetch" href="/assets/demo1-12d68d90.js" as="script"><link rel="prefetch" href="/assets/demo2-9eb3d5e3.js" as="script"><link rel="prefetch" href="/assets/demo3-cad48c33.js" as="script"><link rel="prefetch" href="/assets/demo4-00837823.js" as="script"><link rel="prefetch" href="/assets/hideDetail-73eabcb6.js" as="script"><link rel="prefetch" href="/assets/demo1-d30bc42d.js" as="script"><link rel="prefetch" href="/assets/card-49344c01.js" as="script"><link rel="prefetch" href="/assets/cardButton-2ab573df.js" as="script"><link rel="prefetch" href="/assets/custom-2e1d5ce9.js" as="script"><link rel="prefetch" href="/assets/formAndTable-a9e89390.js" as="script"><link rel="prefetch" href="/assets/formFast-68efe74c.js" as="script"><link rel="prefetch" href="/assets/custom-8ee84dfd.js" as="script"><link rel="prefetch" href="/assets/demo1-3e00eea3.js" as="script"><link rel="prefetch" href="/assets/demo1-13d09bea.js" as="script"><link rel="prefetch" href="/assets/coreCustom-44473ea3.js" as="script"><link rel="prefetch" href="/assets/demo1-ffb79487.js" as="script"><link rel="prefetch" href="/assets/moreSearchPopup-e8539b49.js" as="script"><link rel="prefetch" href="/assets/moreSearchPopupTabular-0b018d46.js" as="script"><link rel="prefetch" href="/assets/moreSearchPullDown-a130f024.js" as="script"><link rel="prefetch" href="/assets/moreSearchPullDownTabular-76657876.js" as="script"><link rel="prefetch" href="/assets/selecttion-c7803256.js" as="script"><link rel="prefetch" href="/assets/tabs-d56f6b99.js" as="script"><link rel="prefetch" href="/assets/demo1-0816d60f.js" as="script"><link rel="prefetch" href="/assets/demo2-9ecc5665.js" as="script"><link rel="prefetch" href="/assets/bootstrapLayout-1ea184c9.js" as="script"><link rel="prefetch" href="/assets/controlGroup-e8c42887.js" as="script"><link rel="prefetch" href="/assets/customLabel-4a16a282.js" as="script"><link rel="prefetch" href="/assets/demo1-c21fdd62.js" as="script"><link rel="prefetch" href="/assets/demo2-41d266a2.js" as="script"><link rel="prefetch" href="/assets/demo3-269fd0f6.js" as="script"><link rel="prefetch" href="/assets/demo4-00f66ba2.js" as="script"><link rel="prefetch" href="/assets/demo5-dda7cc5a.js" as="script"><link rel="prefetch" href="/assets/showToolTip-d3b9b379.js" as="script"><link rel="prefetch" href="/assets/uploadDemo-c32953ff.js" as="script"><link rel="prefetch" href="/assets/demo1-b5788180.js" as="script"><link rel="prefetch" href="/assets/demo2-c260ab31.js" as="script"><link rel="prefetch" href="/assets/demo3-6cdf8519.js" as="script"><link rel="prefetch" href="/assets/customColor-3d9de184.js" as="script"><link rel="prefetch" href="/assets/demo0-d1d86d70.js" as="script"><link rel="prefetch" href="/assets/demo1-768aae0e.js" as="script"><link rel="prefetch" href="/assets/demo2-09509e5d.js" as="script"><link rel="prefetch" href="/assets/demo3-7b5c78e1.js" as="script"><link rel="prefetch" href="/assets/demo1-1fef897c.js" as="script"><link rel="prefetch" href="/assets/demo2-9eb823cc.js" as="script"><link rel="prefetch" href="/assets/design-d18997c2.js" as="script"><link rel="prefetch" href="/assets/drawingBoard-b0338214.js" as="script"><link rel="prefetch" href="/assets/bindEvents-dffae645.js" as="script"><link rel="prefetch" href="/assets/classic-0a187567.js" as="script"><link rel="prefetch" href="/assets/contentStorage-975c1b84.js" as="script"><link rel="prefetch" href="/assets/distraction-80ebb968.js" as="script"><link rel="prefetch" href="/assets/form-eaa75a02.js" as="script"><link rel="prefetch" href="/assets/getInstance-23efae27.js" as="script"><link rel="prefetch" href="/assets/inline-6be92b15.js" as="script"><link rel="prefetch" href="/assets/serverUpload-df40118c.js" as="script"><link rel="prefetch" href="/assets/demo1-b740e314.js" as="script"><link rel="prefetch" href="/assets/demo1-68bb6031.js" as="script"><link rel="prefetch" href="/assets/demo2-df4d048d.js" as="script"><link rel="prefetch" href="/assets/demo3-28e0085f.js" as="script"><link rel="prefetch" href="/assets/verticalCenter-129ef695.js" as="script"><link rel="prefetch" href="/assets/demo1-98350cb8.js" as="script"><link rel="prefetch" href="/assets/demo2-7f6ee778.js" as="script"><link rel="prefetch" href="/assets/demo1-f7056bc7.js" as="script"><link rel="prefetch" href="/assets/demo2-a0ba8b6f.js" as="script"><link rel="prefetch" href="/assets/demo1-1c313755.js" as="script"><link rel="prefetch" href="/assets/demo2-c2582bd1.js" as="script"><link rel="prefetch" href="/assets/demo3-a4610510.js" as="script"><link rel="prefetch" href="/assets/demo1-18fbac0d.js" as="script"><link rel="prefetch" href="/assets/demo2-9cab9d84.js" as="script"><link rel="prefetch" href="/assets/demo3-0bbd970b.js" as="script"><link rel="prefetch" href="/assets/demo4-51797bfb.js" as="script"><link rel="prefetch" href="/assets/demo5-43641915.js" as="script"><link rel="prefetch" href="/assets/demo6-b040d95c.js" as="script"><link rel="prefetch" href="/assets/demo7-ce249bbd.js" as="script"><link rel="prefetch" href="/assets/demo8-edf67670.js" as="script"><link rel="prefetch" href="/assets/hideColumnDemo-69627cb7.js" as="script"><link rel="prefetch" href="/assets/oprationColumnConfiger-c237144b.js" as="script"><link rel="prefetch" href="/assets/validate-fbf1b277.js" as="script"><link rel="prefetch" href="/assets/demo1-d9847e60.js" as="script"><link rel="prefetch" href="/assets/demo2-11587063.js" as="script"><link rel="prefetch" href="/assets/demo1-291c9baa.js" as="script"><link rel="prefetch" href="/assets/demo2-52e0c845.js" as="script"><link rel="prefetch" href="/assets/demo3-568b7e8b.js" as="script"><link rel="prefetch" href="/assets/demo4-927e1acc.js" as="script"><link rel="prefetch" href="/assets/avatar-15cf2607.js" as="script"><link rel="prefetch" href="/assets/disabled-433e98ce.js" as="script"><link rel="prefetch" href="/assets/picture-card-c1a8bb4b.js" as="script"><link rel="prefetch" href="/assets/picture-ef3755b5.js" as="script"><link rel="prefetch" href="/assets/preview-f61e7e14.js" as="script"><link rel="prefetch" href="/assets/text-09ef0872.js" as="script"><link rel="prefetch" href="/assets/demo1-a3645ecb.js" as="script"><link rel="prefetch" href="/assets/demo2-d734f7c1.js" as="script"><link rel="prefetch" href="/assets/demo3-0dfdb25a.js" as="script"><link rel="prefetch" href="/assets/demo4-2fb2cce1.js" as="script"><link rel="prefetch" href="/assets/demo5-b421d6bb.js" as="script"><link rel="prefetch" href="/assets/demo6-16ebc159.js" as="script"><link rel="prefetch" href="/assets/demo1-490f80f0.js" as="script"><link rel="prefetch" href="/assets/demo2-e79b66d1.js" as="script"><link rel="prefetch" href="/assets/demo3-f504fcea.js" as="script"><link rel="prefetch" href="/assets/demo4-edeaa9ad.js" as="script"><link rel="prefetch" href="/assets/demo5-f8626895.js" as="script"><link rel="prefetch" href="/assets/demo1-8a123b0e.js" as="script"><link rel="prefetch" href="/assets/demo2-69d4255d.js" as="script"><link rel="prefetch" href="/assets/demo3-2afab6da.js" as="script"><link rel="prefetch" href="/assets/advance-a564dd5c.js" as="script"><link rel="prefetch" href="/assets/demo1-15b4a1ee.js" as="script"><link rel="prefetch" href="/assets/demo2-b3c9e3c3.js" as="script"><link rel="prefetch" href="/assets/demo3-376435ef.js" as="script"><link rel="prefetch" href="/assets/demo4-a8f3de98.js" as="script"><link rel="prefetch" href="/assets/demo5-064b8bb9.js" as="script"><link rel="prefetch" href="/assets/formInside-98b98293.js" as="script"><link rel="prefetch" href="/assets/index-4853382f.js" as="script"><link rel="prefetch" href="/assets/tableInside-481256b6.js" as="script"><link rel="prefetch" href="/assets/closeInit-cb2ef70b.js" as="script"><link rel="prefetch" href="/assets/formInside-4ba7da68.js" as="script"><link rel="prefetch" href="/assets/index-7816f63c.js" as="script"><link rel="prefetch" href="/assets/tableInside-57de18ec.js" as="script"><link rel="prefetch" href="/assets/formInside-e196b3cb.js" as="script"><link rel="prefetch" href="/assets/hideHeader-7f741a3f.js" as="script"><link rel="prefetch" href="/assets/index-06f007ac.js" as="script"><link rel="prefetch" href="/assets/tableInside-8789cc27.js" as="script"><link rel="prefetch" href="/assets/index-43c3d78a.js" as="script">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><img class="logo" src="/favicon.ico" alt="JN Frontend Docs"><span class="site-name can-hide">JN Frontend Docs</span></a></span><div class="navbar-items-wrapper" style=""><!--[--><!--]--><nav class="navbar-items can-hide"><!--[--><div class="navbar-item"><a href="/components/" class="router-link-active" aria-label="组件库"><!--[--><!--]--> 组件库 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/micro/" class="" aria-label="微前端"><!--[--><!--]--> 微前端 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/micro-cli/" class="" aria-label="micro-cli"><!--[--><!--]--> micro-cli <!--[--><!--]--></a></div><div class="navbar-item"><a href="/utilsDocs/" class="" aria-label="utils"><!--[--><!--]--> utils <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="更新日志"><span class="title">更新日志</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="更新日志"><span class="title">更新日志</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a href="/components/UpdateLog.md" class="" aria-label="组件库@3.0.0"><!--[--><!--]--> 组件库@3.0.0 <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/micro/updateLog/basic.md" class="" aria-label="统一管理平台@2.4.0"><!--[--><!--]--> 统一管理平台@2.4.0 <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/micro/updateLog/dependence.md" class="" aria-label="微应用依赖"><!--[--><!--]--> 微应用依赖 <!--[--><!--]--></a></li><!--]--></ul></div></div><!--]--></nav><!--[--><!--]--><button class="toggle-color-mode-button" title="toggle color mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><form class="search-box" role="search"><input type="search" autocomplete="off" spellcheck="false" value><!----></form></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-items"><!--[--><div class="navbar-item"><a href="/components/" class="router-link-active" aria-label="组件库"><!--[--><!--]--> 组件库 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/micro/" class="" aria-label="微前端"><!--[--><!--]--> 微前端 <!--[--><!--]--></a></div><div class="navbar-item"><a href="/micro-cli/" class="" aria-label="micro-cli"><!--[--><!--]--> micro-cli <!--[--><!--]--></a></div><div class="navbar-item"><a href="/utilsDocs/" class="" aria-label="utils"><!--[--><!--]--> utils <!--[--><!--]--></a></div><div class="navbar-item"><div class="navbar-dropdown-wrapper"><button class="navbar-dropdown-title" type="button" aria-label="更新日志"><span class="title">更新日志</span><span class="arrow down"></span></button><button class="navbar-dropdown-title-mobile" type="button" aria-label="更新日志"><span class="title">更新日志</span><span class="right arrow"></span></button><ul style="display:none;" class="navbar-dropdown"><!--[--><li class="navbar-dropdown-item"><a href="/components/UpdateLog.md" class="" aria-label="组件库@3.0.0"><!--[--><!--]--> 组件库@3.0.0 <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/micro/updateLog/basic.md" class="" aria-label="统一管理平台@2.4.0"><!--[--><!--]--> 统一管理平台@2.4.0 <!--[--><!--]--></a></li><li class="navbar-dropdown-item"><a href="/micro/updateLog/dependence.md" class="" aria-label="微应用依赖"><!--[--><!--]--> 微应用依赖 <!--[--><!--]--></a></li><!--]--></ul></div></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-items"><!--[--><li><a href="/components/index.md" class="sidebar-item sidebar-heading" aria-label="指引"><!--[--><!--]--> 指引 <!--[--><!--]--></a><!----></li><li><a href="/components/Updateguide.md" class="sidebar-item sidebar-heading" aria-label="升级指南"><!--[--><!--]--> 升级指南 <!--[--><!--]--></a><!----></li><li><p tabindex="0" class="sidebar-item sidebar-heading active">控制组件 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/components/Form.md" class="sidebar-item active" aria-label="Form"><!--[--><!--]--> Form <!--[--><!--]--></a><!----></li><li><a href="/components/Tabs.md" class="sidebar-item" aria-label="Tabs"><!--[--><!--]--> Tabs <!--[--><!--]--></a><!----></li><li><a href="/components/FigureInput.md" class="sidebar-item" aria-label="FigureInput"><!--[--><!--]--> FigureInput <!--[--><!--]--></a><!----></li><li><a href="/components/IconPicker.md" class="sidebar-item" aria-label="IconPicker"><!--[--><!--]--> IconPicker <!--[--><!--]--></a><!----></li><li><a href="/components/Upload.md" class="sidebar-item" aria-label="Upload"><!--[--><!--]--> Upload <!--[--><!--]--></a><!----></li><li><a href="/components/InfoSAA/InfoSelect.md" class="sidebar-item" aria-label="InfoSelect"><!--[--><!--]--> InfoSelect <!--[--><!--]--></a><!----></li><li><a href="/components/InfoSAA/InfoSelectAll.md" class="sidebar-item" aria-label="InfoSelectAll"><!--[--><!--]--> InfoSelectAll <!--[--><!--]--></a><!----></li><li><a href="/components/InfoSAA/InfoAutocomplete.md" class="sidebar-item" aria-label="InfoAutocomplete"><!--[--><!--]--> InfoAutocomplete <!--[--><!--]--></a><!----></li><li><a href="/components/SelectTree.md" class="sidebar-item" aria-label="SelectTree"><!--[--><!--]--> SelectTree <!--[--><!--]--></a><!----></li><li><a href="/components/SelectTreeV2.md" class="sidebar-item" aria-label="SelectTreeV2"><!--[--><!--]--> SelectTreeV2 <!--[--><!--]--></a><!----></li><li><a href="/components/Address.md" class="sidebar-item" aria-label="Address"><!--[--><!--]--> Address <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">动态表单 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/components/DynamicForm/FormGenerate.md" class="sidebar-item" aria-label="FormGenerate"><!--[--><!--]--> FormGenerate <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">布局组件 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/components/BaseModule.md" class="sidebar-item" aria-label="BaseModule"><!--[--><!--]--> BaseModule <!--[--><!--]--></a><!----></li><li><a href="/components/BaseDrawerContent.md" class="sidebar-item" aria-label="BaseDrawerContent"><!--[--><!--]--> BaseDrawerContent <!--[--><!--]--></a><!----></li><li><a href="/components/Modal.md" class="sidebar-item" aria-label="Modal"><!--[--><!--]--> Modal <!--[--><!--]--></a><!----></li><li><a href="/components/Collapse.md" class="sidebar-item" aria-label="Collapse"><!--[--><!--]--> Collapse <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">展示组件 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/components/Icon.md" class="sidebar-item" aria-label="Icon"><!--[--><!--]--> Icon <!--[--><!--]--></a><!----></li><li><a href="/components/Table.md" class="sidebar-item" aria-label="Table"><!--[--><!--]--> Table <!--[--><!--]--></a><!----></li><li><a href="/components/Tree.md" class="sidebar-item" aria-label="Tree"><!--[--><!--]--> Tree <!--[--><!--]--></a><!----></li><li><a href="/components/IrregularTable.md" class="sidebar-item" aria-label="IrregularTable"><!--[--><!--]--> IrregularTable <!--[--><!--]--></a><!----></li><li><a href="/components/FilePreview.md" class="sidebar-item" aria-label="FilePreview"><!--[--><!--]--> FilePreview <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">基础组件 <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/components/DebounceButton.md" class="sidebar-item" aria-label="DebounceButton"><!--[--><!--]--> DebounceButton <!--[--><!--]--></a><!----></li><li><a href="/components/LodingShade.md" class="sidebar-item" aria-label="LodingShade"><!--[--><!--]--> LodingShade <!--[--><!--]--></a><!----></li><li><a href="/components/ButtonGroup.md" class="sidebar-item" aria-label="ButtonGroup"><!--[--><!--]--> ButtonGroup <!--[--><!--]--></a><!----></li><li><a href="/components/HintBox.md" class="sidebar-item" aria-label="HintBox"><!--[--><!--]--> HintBox <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><p tabindex="0" class="sidebar-item sidebar-heading">ECharts <!----></p><ul style="" class="sidebar-item-children"><!--[--><li><a href="/components/Chart/Basic.md" class="sidebar-item" aria-label="Basic"><!--[--><!--]--> Basic <!--[--><!--]--></a><!----></li><li><a href="/components/Chart/Bar.md" class="sidebar-item" aria-label="Bar"><!--[--><!--]--> Bar <!--[--><!--]--></a><!----></li><li><a href="/components/Chart/Line.md" class="sidebar-item" aria-label="Line"><!--[--><!--]--> Line <!--[--><!--]--></a><!----></li><li><a href="/components/Chart/Pie.md" class="sidebar-item" aria-label="Pie"><!--[--><!--]--> Pie <!--[--><!--]--></a><!----></li><!--]--></ul></li><li><a href="/components/JnEditor.md" class="sidebar-item sidebar-heading" aria-label="富文本编辑器"><!--[--><!--]--> 富文本编辑器 <!--[--><!--]--></a><!----></li><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><!--]--><div><h1 id="form" tabindex="-1"><a class="header-anchor" href="#form" aria-hidden="true">#</a> Form</h1><nav class="table-of-contents"><ul><li><a aria-current="page" href="/components/Form.html#前言" class="router-link-active router-link-exact-active">前言</a></li><li><a aria-current="page" href="/components/Form.html#思想" class="router-link-active router-link-exact-active">思想</a><ul><li><a aria-current="page" href="/components/Form.html#旧" class="router-link-active router-link-exact-active">旧</a></li><li><a aria-current="page" href="/components/Form.html#新" class="router-link-active router-link-exact-active">新</a></li></ul></li><li><a aria-current="page" href="/components/Form.html#样例" class="router-link-active router-link-exact-active">样例</a><ul><li><a aria-current="page" href="/components/Form.html#已支持的控件" class="router-link-active router-link-exact-active">已支持的控件</a></li><li><a aria-current="page" href="/components/Form.html#自定义渲染-label" class="router-link-active router-link-exact-active">自定义渲染 label</a></li><li><a aria-current="page" href="/components/Form.html#自定义控件" class="router-link-active router-link-exact-active">自定义控件</a></li><li><a aria-current="page" href="/components/Form.html#表单校验" class="router-link-active router-link-exact-active">表单校验</a></li><li><a aria-current="page" href="/components/Form.html#控件组" class="router-link-active router-link-exact-active">控件组</a></li><li><a aria-current="page" href="/components/Form.html#控件内容超出宽度-显示-tooltip" class="router-link-active router-link-exact-active">控件内容超出宽度，显示 ToolTip</a></li><li><a aria-current="page" href="/components/Form.html#待选列表自动填充" class="router-link-active router-link-exact-active">待选列表自动填充</a></li><li><a aria-current="page" href="/components/Form.html#表单项响应式布局" class="router-link-active router-link-exact-active">表单项响应式布局</a></li><li><a aria-current="page" href="/components/Form.html#字段修改历史" class="router-link-active router-link-exact-active">字段修改历史</a></li></ul></li><li><a aria-current="page" href="/components/Form.html#gform-config-配置列表" class="router-link-active router-link-exact-active">GForm :config 配置列表</a><ul><li><a aria-current="page" href="/components/Form.html#form-attributes" class="router-link-active router-link-exact-active">Form Attributes</a></li><li><a aria-current="page" href="/components/Form.html#form-item-attributes" class="router-link-active router-link-exact-active">Form-Item Attributes</a></li><li><a aria-current="page" href="/components/Form.html#controlconfig" class="router-link-active router-link-exact-active">ControlConfig</a></li><li><a aria-current="page" href="/components/Form.html#extendcontrolconfig" class="router-link-active router-link-exact-active">ExtendControlConfig</a></li></ul></li></ul></nav><h2 id="前言" tabindex="-1"><a class="header-anchor" href="#前言" aria-hidden="true">#</a> 前言</h2><p>在 <a href="https://element-plus.gitee.io/#/zh-CN/component/form" target="_blank" rel="noopener noreferrer">Element Form<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a> 的基础上，使其配置化的二次封装</p><p>实现了：</p><ul><li>Item 配置化</li><li>便捷的实例获取</li><li>多种方式配置控件（预定义 + render）</li></ul><h2 id="思想" tabindex="-1"><a class="header-anchor" href="#思想" aria-hidden="true">#</a> 思想</h2><p>在开始查看示例之前，最好先理解下当前组件的封装思想</p><h3 id="旧" tabindex="-1"><a class="header-anchor" href="#旧" aria-hidden="true">#</a> 旧</h3><p>Element 已经提供了功能丰富的 Form 组件，但我们在使用时多是复制及创建一堆的 <code>&lt;form-item&gt;</code> + 内部控件如 <code>&lt;el-input&gt;</code> ， 根据业务需求，排列出我们需要的表单，就造成了在 <code>&lt;template&gt;</code> 中存在过多的代码行，要进行更换某个控件时，还要去一堆标签中寻找</p><p>就像这样：</p><p><img src="/images/ele-form-temp.png" alt="ele-form-temp"></p><p>在以往的使用中，痛点在于：</p><ol><li><p>冗长的 tamplate</p><blockquote><p>妨碍其他组件的视觉，不利于阅读</p></blockquote></li><li><p>重复的复制粘贴</p><blockquote><p>即使有现成的 <code>&lt;form-item&gt;</code> 供我们粘贴使用，但我们依然需要重复的去修改每一个 <code>&lt;form-item&gt;</code> 的 <code>props</code></p></blockquote></li><li><p>重复的控件配置</p><blockquote><p>我们在配置 formItem 的同时还要配置 item 的控件，这些都是重复的工作</p></blockquote></li></ol><h3 id="新" tabindex="-1"><a class="header-anchor" href="#新" aria-hidden="true">#</a> 新</h3><p>当前组件通过数据的配置，解决了冗长的模板，避免了重复的复制粘贴，使控件高度灵活可配 <br></p><p>数据模型基于一个分层概念，拿一个表单示例：</p><p><img src="/images/form-layer.png" alt="form-layer"></p><p>一个业务表单，应该由 <code>外层 form</code> + <code>form-item</code> + <code>control</code> 构成，完全对应 Element 中的 Form 组件的构成；<br> 而当前组件的配置对象，就像这个层次一样，是多维的嵌套，每一层决定对应的层级的配置。</p><div class="custom-container tip"><p class="custom-container-title">配置属性来源</p><p>配置对象中的每一层可配置属性，皆来自 Element 组件中对应的层级的 Props，只不过是在当前组件库内定义为了接口<br> 而在组件内部，实际上是通过 <code>v-bind</code> 的方式，将各配置属性传递下去</p></div><h2 id="样例" tabindex="-1"><a class="header-anchor" href="#样例" aria-hidden="true">#</a> 样例</h2><h3 id="已支持的控件" tabindex="-1"><a class="header-anchor" href="#已支持的控件" aria-hidden="true">#</a> 已支持的控件</h3><ul><li><a href="https://element-plus.gitee.io/#/zh-CN/component/input" target="_blank" rel="noopener noreferrer">Input<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li><a href="https://element-plus.gitee.io/#/zh-CN/component/input-number" target="_blank" rel="noopener noreferrer">InputNumber<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li><a href="https://element-plus.gitee.io/#/zh-CN/component/select" target="_blank" rel="noopener noreferrer">Select<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li><a href="https://element-plus.gitee.io/#/zh-CN/component/radio" target="_blank" rel="noopener noreferrer">Radio<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li><a href="https://element-plus.gitee.io/#/zh-CN/component/radio" target="_blank" rel="noopener noreferrer">RadioButton<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li><a href="https://element-plus.gitee.io/#/zh-CN/component/switch" target="_blank" rel="noopener noreferrer">Switch<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li><a href="https://element-plus.gitee.io/#/zh-CN/component/time-picker" target="_blank" rel="noopener noreferrer">TimePicker<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li><a href="https://element-plus.gitee.io/#/zh-CN/component/time-select" target="_blank" rel="noopener noreferrer">TimeSelect<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li><a href="https://element-plus.gitee.io/#/zh-CN/component/date-picker" target="_blank" rel="noopener noreferrer">DatePicker<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li><a href="https://element-plus.gitee.io/#/zh-CN/component/datetime-picker" target="_blank" rel="noopener noreferrer">DateTimePicker<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li><a href="https://element-plus.gitee.io/#/zh-CN/component/checkbox" target="_blank" rel="noopener noreferrer">Checkbox<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li><a href="https://element-plus.gitee.io/#/zh-CN/component/checkbox" target="_blank" rel="noopener noreferrer">CheckboxButton<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li><a href="https://element-plus.gitee.io/#/zh-CN/component/color-picker" target="_blank" rel="noopener noreferrer">ColorPicker<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li><a href="https://element-plus.gitee.io/#/zh-CN/component/rate" target="_blank" rel="noopener noreferrer">Rate<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li><a href="https://element-plus.gitee.io/#/zh-CN/component/slider" target="_blank" rel="noopener noreferrer">Slider<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></li><li><a href="/components/SelectTree.html" class="">SelectTree</a></li><li><a href="/components/SelectTreeV2.html" class="">SelectTreeV2</a></li><li><a href="/components/FigureInput.html" class="">FigureInput</a></li><li><a href="/components/IconPicker.html" class="">IconPicker</a></li><li><a href="/components/Upload.html" class="">Upload</a></li><li><a href="/components/InfoSAA/InfoSelect.html" class="">InfoSelect</a></li><li><a href="/components/InfoSAA/InfoSelectAll.html" class="">InfoSelectAll</a></li><li><a href="/components/InfoSAA/InfoAutocomplete.html" class="">InfoAutocomplete</a></li><li><a href="/components/Address.html" class="">Address</a></li></ul><!----><p>如上样例所示，使用该组件完全解放了 <code>&lt;template&gt;</code> ，整个表单完全交由数据模型管理，虽然这个数据模型的配置也很长，但是一般采用的方式是将这个数据模型整个<strong>抽离出去</strong>，作为一个单独的<strong>js模块</strong>，这样一来，主模块就会变得很干净了。</p><p>而对于表单的操作，就变成了对这个数据模型的操作</p><div class="custom-container tip"><p class="custom-container-title">注意</p><p>由于表单配置对象一般要在后续进行操作，所以，在定义这个配置对象时，一定要配置成响应式对象</p></div><h3 id="自定义渲染-label" tabindex="-1"><a class="header-anchor" href="#自定义渲染-label" aria-hidden="true">#</a> 自定义渲染 label</h3><p>FormItem.label 可以传递字符串，也可以传递一个函数： <code>(prop?: any) =&gt; JSX. Element | VNode | string | number</code></p><div class="custom-container tip"><p class="custom-container-title">注意</p><p>非自定义的 label，控件的 <code>placeholder</code> 将拼接 label 的值，但是自定义的 label 将无法拼接 <code>placeholder</code> ，故在使用自定义渲染 label 时，要为控件传递 <code>placeholder</code></p></div><!----><h3 id="自定义控件" tabindex="-1"><a class="header-anchor" href="#自定义控件" aria-hidden="true">#</a> 自定义控件</h3><p>对于 “第三层” 配置，存在两种配置方式：</p><ul><li>一种是预配置方式，即上述样例中的 <code>controlConfig</code></li><li>另一种就是使用自定义渲染函数 <code>render</code></li></ul><p>有些不常用的控件并没有封装进当前 Form 组件，也有可能存在一些需要自定义的控件，或将 FormItem 作为布局组件使用，这些都可以使用 <code>render</code> 来实现</p><div class="custom-container tip"><p class="custom-container-title">注意</p><p>Form 组件内部 item 的生成时，依赖 formItem 的 <code>prop</code> 属性，且与内部 <code>model</code> 的关联也依赖 <code>prop</code> ， 即使自定义控件不需要与 <code>model</code> 交互，也需要定义唯一的 <code>prop</code></p></div><!----><p>如上样例所示，通过配置对象中的 <code>instance</code> 字段，可以拿到表单实例，实际上是表单的 <code>ref</code> ，可以用来调用 Element Form 提供的方法</p><p>而对于数据的收集，直接获取配置对象中的 <code>model</code> 对象即可</p><div class="custom-container tip"><p class="custom-container-title">TIP</p><p>对于Form 组件来说 <code>instance</code> 和 <code>model</code> 是至关重要的</p></div><h3 id="表单校验" tabindex="-1"><a class="header-anchor" href="#表单校验" aria-hidden="true">#</a> 表单校验</h3><p>表单的校验配置方式可分为两种</p><ul><li>将所有的要校验的字段配置到 “第一层” Form.rules</li><li>各 FormItem 自己携带配置 FormItem.rules</li></ul><p>校验是基于 <strong>async-validator</strong> 这个库的，可配置内容如下</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">interface</span> <span class="token class-name">RuleItem</span> <span class="token punctuation">{</span>
    type<span class="token operator">?</span><span class="token operator">:</span> RuleType<span class="token punctuation">;</span>
    required<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
    pattern<span class="token operator">?</span><span class="token operator">:</span> RegExp <span class="token operator">|</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
    min<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
    max<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
    len<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
    <span class="token keyword">enum</span><span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">Array</span><span class="token operator">&lt;</span><span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span> <span class="token operator">|</span> <span class="token builtin">boolean</span> <span class="token operator">|</span> <span class="token keyword">null</span> <span class="token operator">|</span> <span class="token keyword">undefined</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>
    whitespace<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
    fields<span class="token operator">?</span><span class="token operator">:</span> Record<span class="token operator">&lt;</span><span class="token builtin">string</span><span class="token punctuation">,</span> Rule<span class="token operator">&gt;</span><span class="token punctuation">;</span>
    options<span class="token operator">?</span><span class="token operator">:</span> ValidateOption<span class="token punctuation">;</span>
    defaultField<span class="token operator">?</span><span class="token operator">:</span> Rule<span class="token punctuation">;</span>
    transform<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span>value<span class="token operator">:</span> Value<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> Value<span class="token punctuation">;</span>
    message<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>a<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 异步自定义校验</span>
    asyncValidator<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span>
      rule<span class="token operator">:</span> InternalRuleItem<span class="token punctuation">,</span> 
      value<span class="token operator">:</span> Value<span class="token punctuation">,</span> 
      <span class="token function-variable function">callback</span><span class="token operator">:</span> <span class="token punctuation">(</span>error<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> Error<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">,</span> 
      source<span class="token operator">:</span> Values<span class="token punctuation">,</span> options<span class="token operator">:</span> ValidateOption
    <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span> <span class="token operator">|</span> <span class="token builtin">Promise</span><span class="token operator">&lt;</span><span class="token keyword">void</span><span class="token operator">&gt;</span><span class="token punctuation">;</span>
    <span class="token comment">// 自定义校验</span>
    validator<span class="token operator">?</span><span class="token operator">:</span> <span class="token punctuation">(</span>
      rule<span class="token operator">:</span> InternalRuleItem<span class="token punctuation">,</span> 
      value<span class="token operator">:</span> Value<span class="token punctuation">,</span> 
      <span class="token function-variable function">callback</span><span class="token operator">:</span> <span class="token punctuation">(</span>error<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> Error<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">void</span><span class="token punctuation">,</span> 
      source<span class="token operator">:</span> Values<span class="token punctuation">,</span> 
      options<span class="token operator">:</span> ValidateOption
    <span class="token punctuation">)</span> <span class="token operator">=&gt;</span> SyncValidateResult <span class="token operator">|</span> <span class="token keyword">void</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment">// 适应 Element 的控件，配置触发方式</span>
<span class="token keyword">interface</span> <span class="token class-name">ExtendRuleItem</span> <span class="token keyword">extends</span> <span class="token class-name">RuleItem</span> <span class="token punctuation">{</span>
    trigger<span class="token operator">?</span><span class="token operator">:</span> <span class="token string">&#39;blur&#39;</span> <span class="token operator">|</span> <span class="token string">&#39;change&#39;</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h4 id="添加给-formitem-rules" tabindex="-1"><a class="header-anchor" href="#添加给-formitem-rules" aria-hidden="true">#</a> 添加给 FormItem.rules</h4><!----><h4 id="添加给-form-rules" tabindex="-1"><a class="header-anchor" href="#添加给-form-rules" aria-hidden="true">#</a> 添加给 Form.rules</h4><!----><p>由上可见，两种添加方式是等效的</p><h3 id="控件组" tabindex="-1"><a class="header-anchor" href="#控件组" aria-hidden="true">#</a> 控件组</h3><p>一个 FormItem 中可配置多个控件，行成控件组；</p><p>将 ControlConfig 更换成 <code>ControlConfigs</code> 即可配置控件组</p><!----><h3 id="控件内容超出宽度-显示-tooltip" tabindex="-1"><a class="header-anchor" href="#控件内容超出宽度-显示-tooltip" aria-hidden="true">#</a> 控件内容超出宽度，显示 ToolTip</h3><p>目前仅 Input 控件做了适配</p><!----><h3 id="待选列表自动填充" tabindex="-1"><a class="header-anchor" href="#待选列表自动填充" aria-hidden="true">#</a> 待选列表自动填充</h3><div class="custom-container tip"><p class="custom-container-title">适用于 2.1.0+</p></div><p>在以往的开发中，我们在操作一个拥有待选列表的控件（如：下拉框、单多选框、下拉树）时，我们需要请求接口，根据接口返回的数据，映射成对应的待选列表，然后再经过查找、赋值，才能回填到控件中，如下</p><p><img src="/assets/待选列表回填-7de9f0b4.png" alt="待选列表"></p><p>现在，为一些包含带有待选列表的控件，提供了通过配置一个请求地址的方式，实现自动请求、填充、更新的功能</p><p>目前已受支持的组件：</p><ul><li>select</li><li>checkBox</li><li>checkBoxButton</li><li>radio</li><li>radioButton</li><li>selectTreeV2</li></ul><div class="custom-container tip"><p class="custom-container-title">TIP</p><p>一个功能组件，应该尽量与业务保持平行，当前的功能属于与业务发生了交叉点，在请求接口的时候，需要携带登录 token，获取的 token 是获取的 vuex 持久化中的 token</p><p>如果没有 token，功能将不生效</p><p>需要注意的是，在填写请求地址的时候，开发阶段会使用代理，因此需要配置请求代理的前缀，而生产阶段是不需要的，因此需要引用 <code>api</code> 模块中配置的 prefix，以保证代理前缀的正确配置（必须）</p></div><p>因为当前组件和业务请求挂钩，各位看到的文档是部署在 gitlub 中的，无法与业务接口进行交互，因此这里仅贴出样例代码</p><div class="language-vue line-numbers-mode" data-ext="vue"><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>g-form</span> <span class="token attr-name">:config</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>formConfig<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>g-button-group</span> <span class="token attr-name">:btns</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>btns<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
    <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">&#39;FormGenerateAdvanceTest&#39;</span>
<span class="token punctuation">}</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>ts<span class="token punctuation">&quot;</span></span> <span class="token attr-name">setup</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
<span class="token keyword">import</span> <span class="token punctuation">{</span> reactive <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;vue&#39;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> FormProps<span class="token punctuation">,</span> BtnProps<span class="token punctuation">,</span> RadioControlConfig <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;jn-ve-global/packages&#39;</span>
<span class="token keyword">import</span> prefix <span class="token keyword">from</span> <span class="token string">&#39;@/api/prefix&#39;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">%c prefix === </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token string">&#39;color: #e6a23c;&#39;</span><span class="token punctuation">,</span> prefix<span class="token punctuation">)</span>

<span class="token keyword">const</span> formConfig <span class="token operator">=</span> reactive<span class="token operator">&lt;</span>FormProps<span class="token operator">&gt;</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">instance</span><span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
    <span class="token literal-property property">labelWidth</span><span class="token operator">:</span> <span class="token string">&#39;150px&#39;</span><span class="token punctuation">,</span>
    <span class="token literal-property property">model</span><span class="token operator">:</span> <span class="token punctuation">{</span>
        <span class="token literal-property property">select</span><span class="token operator">:</span> <span class="token string">&#39;&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">checkBox</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token literal-property property">formItems</span><span class="token operator">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
            <span class="token literal-property property">prop</span><span class="token operator">:</span> <span class="token string">&#39;select&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;Select&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">span</span><span class="token operator">:</span> <span class="token number">24</span><span class="token punctuation">,</span>
            <span class="token literal-property property">controlConfig</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&#39;select&#39;</span><span class="token punctuation">,</span>
                <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
                <span class="token literal-property property">getOptionsUrl</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>prefix<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/kinso-basic-resources-server/v1/iam-institution-info/listForChanage</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
                <span class="token function-variable function">mapOptionsCb</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">data</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
                    <span class="token keyword">return</span> data<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
                        <span class="token literal-property property">label</span><span class="token operator">:</span> item<span class="token punctuation">.</span>name<span class="token punctuation">,</span>
                        <span class="token literal-property property">value</span><span class="token operator">:</span> item<span class="token punctuation">.</span>id
                    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
                <span class="token punctuation">}</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span>
        <span class="token punctuation">{</span>
            <span class="token literal-property property">prop</span><span class="token operator">:</span> <span class="token string">&#39;checkBox&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;CheckBox&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">span</span><span class="token operator">:</span> <span class="token number">24</span><span class="token punctuation">,</span>
            <span class="token literal-property property">controlConfig</span><span class="token operator">:</span> <span class="token punctuation">{</span>
                <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&#39;checkBox&#39;</span><span class="token punctuation">,</span>
                <span class="token literal-property property">options</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
                <span class="token literal-property property">getOptionsUrl</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>prefix<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/kinso-basic-resources-server/v1/iam-institution-info/listForChanage</span><span class="token template-punctuation string">`</span></span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

<span class="token keyword">const</span> <span class="token literal-property property">btns</span><span class="token operator">:</span> BtnProps<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;获取数据&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&#39;default&#39;</span><span class="token punctuation">,</span>
        <span class="token function">onClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">%c model === </span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token string">&#39;color: #67c23a;&#39;</span><span class="token punctuation">,</span> formConfig<span class="token punctuation">.</span>model<span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">{</span>
        <span class="token literal-property property">label</span><span class="token operator">:</span> <span class="token string">&#39;改变请求地址&#39;</span><span class="token punctuation">,</span>
        <span class="token literal-property property">type</span><span class="token operator">:</span> <span class="token string">&#39;default&#39;</span><span class="token punctuation">,</span>
        <span class="token function">onClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token punctuation">;</span><span class="token punctuation">(</span>
                formConfig<span class="token punctuation">.</span>formItems<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> item<span class="token punctuation">.</span>prop <span class="token operator">===</span> <span class="token string">&#39;checkBox&#39;</span><span class="token punctuation">)</span>
                    <span class="token punctuation">.</span>controlConfig <span class="token keyword">as</span> RadioControlConfig
            <span class="token punctuation">)</span><span class="token punctuation">.</span>getOptionsUrl <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>prefix<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/kinso-basic-resources-server/v1/iam-institution-info/institutionChildTreeList</span><span class="token template-punctuation string">`</span></span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">]</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>scss<span class="token punctuation">&quot;</span></span> <span class="token attr-name">scoped</span><span class="token punctuation">&gt;</span></span><span class="token style"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="custom-container tip"><p class="custom-container-title">TIP</p><p>接口请求回来的数据，默认会以 id 作为 value，name 作为 label 映射成待选数据，如果需要自定义映射待选列表，需要传递 <code>mapOptionsCb</code> 回调，该回调会接收请求回来的数据作为参数，需要返回一个映射完数组</p></div><h3 id="表单项响应式布局" tabindex="-1"><a class="header-anchor" href="#表单项响应式布局" aria-hidden="true">#</a> 表单项响应式布局</h3><div class="custom-container tip"><p class="custom-container-title">2.1.9+</p><p>原本每个 FormItem 的布局采用的是：一行 24 栅格式固定式布局（写多少就是多少，不会变化）</p><p>2.1.9 起，提供响应式布局方式，会依照屏幕的大小，进行栅格的预配置调整，响应式基于 <a href="https://element-plus.gitee.io/zh-CN/component/layout.html#%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80" target="_blank" rel="noopener noreferrer">Element Layout 响应式布局<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><p>注意：组件会以 <code>span</code> 的配置为第一优先级，也就是说 <code>span</code> 会覆盖响应式布局， <code>span</code> 和 <code>响应式</code> 二选一配置</p><p>注意：传递 <code>xs/sm/md/lg/xl</code> 任意一个，就会认为采用响应式布局（如果只配置一个，其他则取默认值，如：配置xs，xl 就默认取 8）</p></div><p>默认响应栅格配置：</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code>xs<span class="token operator">:</span> item<span class="token punctuation">.</span>xs <span class="token operator">??</span> <span class="token number">24</span><span class="token punctuation">,</span>
sm<span class="token operator">:</span> item<span class="token punctuation">.</span>sm <span class="token operator">??</span> <span class="token number">12</span><span class="token punctuation">,</span>
md<span class="token operator">:</span> item<span class="token punctuation">.</span>md <span class="token operator">??</span> <span class="token number">12</span><span class="token punctuation">,</span>
lg<span class="token operator">:</span> item<span class="token punctuation">.</span>lg <span class="token operator">??</span> <span class="token number">8</span><span class="token punctuation">,</span>
xl<span class="token operator">:</span> item<span class="token punctuation">.</span>xl <span class="token operator">??</span> <span class="token number">8</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!----><h3 id="字段修改历史" tabindex="-1"><a class="header-anchor" href="#字段修改历史" aria-hidden="true">#</a> 字段修改历史</h3><p>通过后台接口获取到表单的修改日志记录，传递给表单配置的 <code>historyLog</code> 字段，如：</p><p>字段类型：</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token doc-comment comment">/**
 * 数据模型修改历史，json 字符串 or 数据模型
 */</span>
historyLog<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token punctuation">{</span>
    <span class="token punctuation">[</span>k<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">]</span><span class="token operator">:</span> FieldHistoryLog<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><!----><h2 id="gform-config-配置列表" tabindex="-1"><a class="header-anchor" href="#gform-config-配置列表" aria-hidden="true">#</a> GForm :config 配置列表</h2><h3 id="form-attributes" tabindex="-1"><a class="header-anchor" href="#form-attributes" aria-hidden="true">#</a> Form Attributes</h3><p>一层配置：interface <strong>FormProps</strong></p><p>除去扩展字段，请参考 <a href="https://element-plus.gitee.io/#/zh-CN/component/form#form-attributes" target="_blank" rel="noopener noreferrer">Element Form Attributes<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><p>扩展字段：</p><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>instance</td><td>表单的实例（实际为 ref）</td><td><a href="https://element-plus.gitee.io/#/zh-CN/component/form#form-methods" target="_blank" rel="noopener noreferrer">FormInstance<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a> | null</td><td>null</td></tr><tr><td>formItems</td><td>生成表单 item 的配置列表</td><td>FormItemProps[]</td><td>[]</td></tr><tr><td>gutter</td><td>栅格间隔</td><td>number</td><td>20</td></tr><tr><td>colon</td><td>表示是否显示 label 后面的冒号</td><td>boolean</td><td>true</td></tr></tbody></table><h3 id="form-item-attributes" tabindex="-1"><a class="header-anchor" href="#form-item-attributes" aria-hidden="true">#</a> Form-Item Attributes</h3><p>二层配置：interface <strong>FormItemProps</strong></p><p>除去扩展字段，请参考 <a href="https://element-plus.gitee.io/#/zh-CN/component/form#form-item-attributes" target="_blank" rel="noopener noreferrer">Element Form-Item Attributes<span><svg class="external-link-icon" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewbox="0 0 100 100" width="15" height="15"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg><span class="external-link-icon-sr-only">open in new window</span></span></a></p><p>扩展字段：</p><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>controlConfig</td><td>控件配置</td><td>ControlConfig</td><td>--</td></tr><tr><td>render</td><td>控件渲染函数</td><td>(prop?: any) =&gt; JSX. Element | VNode</td><td>--</td></tr><tr><td>span</td><td>FormItem 所占的栅格（1 - 24）</td><td>number</td><td>6</td></tr><tr><td>class</td><td>当前 formItem 的 className</td><td>string</td><td>--</td></tr><tr><td>hide</td><td>隐藏 item</td><td>boolean</td><td>--</td></tr><tr><td>group</td><td>item 的类别组，无实际控制，做鉴别字段</td><td>string | string[]</td><td>--</td></tr><tr><td>controlConfigs</td><td>控件组（一个 item 多个控件）</td><td>ExtendControlConfig[]</td><td>--</td></tr></tbody></table><h3 id="controlconfig" tabindex="-1"><a class="header-anchor" href="#controlconfig" aria-hidden="true">#</a> ControlConfig</h3><p>三层配置：interface <strong>ControlConfig</strong></p><p>请参考源码各控件的 <code>ControlConfig interface</code> + 各控件文档</p><p>基本字段：</p><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>type</td><td>控件类型</td><td>string</td><td>--</td></tr><tr><td>options</td><td>待选列表</td><td>array</td><td>--</td></tr><tr><td>props</td><td>具体的控件的配置对象，需要参考对应 Element 的组件的属性，短横线转小驼峰传递到 props 中</td><td>{}</td><td>--</td></tr><tr><td>treeData</td><td>下拉树的待选数据列表，是一个树形数据</td><td>[]</td><td>--</td></tr><tr><td>getOptionsUrl</td><td>获取待选项列表资源的 url</td><td>string</td><td>--</td></tr><tr><td>mapOptionsCb</td><td>自定义处理映射源数据，会在请求回来后调用</td><td>(data: Array&lt;any&gt;) =&gt; TreeData | TreeData[]</td><td>--</td></tr></tbody></table><h3 id="extendcontrolconfig" tabindex="-1"><a class="header-anchor" href="#extendcontrolconfig" aria-hidden="true">#</a> ExtendControlConfig</h3><p>继承 ControlConfig</p><p>扩展字段：</p><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>after</td><td>控件的后缀（两个控件间的分隔符）</td><td>string</td><td>--</td></tr></tbody></table></div><!--[--><!--]--></div><footer class="page-meta"><!----><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><!----></div><div class="meta-item contributors"><span class="meta-item-label">贡献者: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 18651805393@163.com">Zyunchao</span><!----><!--]--><!--]--></span></div></footer><!----><!--[--><!--]--></main><!--]--></div><!----><!--]--></div>
    <script type="module" src="/assets/app-bfaa94ab.js" defer></script>
  </body>
</html>
